<template>
    <div class="discuss">
        <div class="discuss-banner">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for="(item,index) in bannerList" :key="index"><img :src='item.titleImg' @click="goBanner(item)" /></mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="discuss-discussSelected">一 论坛精选 一</div>
        <div  class="zixun-content-item-right-content" @click="goArtical(item.id)"  v-for="(item,index) in selectedList" :key="index">
          <p>{{item.title}}</p>
          <div class="zixun-content-item-right-content-author clearfix">
              <div class="zixun-content-item-right-content-log">
                    <img :src="item.headImg || 'static/img/logo.png'" alt="贷款">
                </div>
                <p>{{item.nickname}}</p>
                <p>{{item.time}}</p>
          </div>
          <div class="zixun-content-item-right-content-icon clearfix">
              <a href="javascript:void(0)"><img src="../../../assets/comment/pinglun@2x.png" alt=""><span class="red">{{item.PingLunCount|isNull}}</span></a> 
              <a href="javascript:void(0)"><img src="../../../assets/comment/guanzhu@2x.png" alt=""><span>{{item.ShouCangCount|isNull}}</span></a>
                <a href="javascript:void(0)"><img src="../../../assets/comment/dianzan@2x.png" alt=""><span>{{item.DianZCount|isNull}}</span></a>
              <a href="javascript:void(0)">
                  <img src="../../../assets/comment/liulanliang@2x.png" alt="">
                  <span>{{item.readsCount|isNull}}</span>
              </a>   
          </div>
        </div>
        <load-more :tip="('加载中...')" v-if="loadMoreShow"></load-more>
        <load-more :show-loading="false" :tip="('没有更多了')" background-color="#f5f5f5" v-if="noMoreShow"></load-more>
        <div class="discuss-goTop" @click="postAdd">
            <i class="iconfont icon-pinglun"></i>
        </div>
    </div>
</template>
<script>
import { Swipe, SwipeItem, MessageBox } from "mint-ui";
import { dateFormat, LoadMore, cookie } from "vux";
export default {
  name: "discuss",
  components: { LoadMore },
  data() {
    return {
      selectedList: [],
      flag: true,
      pageNum: 1,
      loadMoreShow: false,
      noMoreShow: false,
      title: "资讯精选",
      bannerList: []
    };
  },
  created() {
    var _this = this;
    this.$nextTick(function() {
      window.addEventListener("scroll", onScroll);
    });
    // 判断滚动条位置，加载更多
    function onScroll() {
      var scrollTop = document.body.scrollTop;
      var innerHeight = window.innerHeight;
      var offsetHeight = document.body.offsetHeight;
      if (scrollTop + innerHeight >= offsetHeight) {
        if (_this.flag) {
          if (_this.selectedList.length >= 6) {
            _this.flag = false;
            _this.getList();
          }
        }
      }
    }
  },
  filters:{
    isNull(val){
      return val ? val : 0;
    }
  },
  mounted() {
    document.setTitle("论坛-水珠钱包");
    // 获取资讯页的banner列表
    this.$http
      .get("/loansupermarket-app/information/getBbsBannar")
      .then(function(response) {
        this.bannerList = response.body.data;
      });
    // 刚进入页面获取资讯列表
    this.$http
      .post("/loansupermarket-app/post/list", { pageNum: 1, pageSize: 6 })
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
          this.selectedList = resBody.data;
          if (this.selectedList.length < 6) {
            this.noMoreShow = true;
          }
          // 时间戳转成2018-10-08格式
          this.selectedList.forEach(function(item, index) {
            item.time = dateFormat(item.time, "YYYY-MM-DD");
          });
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });
  },
  methods: {
    getList() {
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
        _this.$http
          .post("/loansupermarket-app/post/list", {
            pageNum: _this.pageNum,
            pageSize: 6
          })
          .then(response => {
            var resBody = response.body;
            if (resBody.code == "000") {
              _this.flag = true;
              _this.loadMoreShow = false;
              if (resBody.data.length < 6) {
                _this.noMoreShow = true;
                _this.flag = false;
              } else {
                _this.flag = true;
              }
              _this.selectedList = _this.selectedList.concat(resBody.data);
              // 时间戳转成2018-10-08格式
              _this.selectedList.forEach(function(item, index) {
                item.time = dateFormat(item.time, "YYYY-MM-DD");
              });
            } else {
            }
          });
      }, 500);
    },
    goArtical(id) {
      var token = cookie.get("token");
      let postData = {
        visitType: 2,
        informationId: id,
        token: token,
        channel: window.sessionStorage.getItem("channel")
          ? window.sessionStorage.getItem("channel")
          : ""
      };
      this.$http
        .post(
          "/loansupermarket-app/information/insertInformationVisit",
          postData
        )
        .then(function(response) {
          if (response.body.code == "000") {
            this.$router.push({
              path: "/main/mydiscover/artical",
              query: { id: id }
            });
          } else if (response.body.code == "444") {
            this.$router.push({
              path: "/main/mydiscover/artical",
              query: { id: id }
            });
          }
        });
    },
    postAdd() {
      var token = cookie.get("token");
      // 调用用户信息接口，获取手机号码
      this.$http
        .post("/loansupermarket-app/user/queryUser", { token: token })
        .then(function(response) {
          var resBody = response.body;
          if (resBody.code == "000") {
            this.$router.push({ path: "/main/mine/mydiscover/sponsorassess" });
          } else if(resBody.code == "444") {
            this.$router.push({ path: "/login", query: { history: 1 } });
          }else{
            MessageBox.alert(resBody.mesg)
          }
        });
    },
    goBanner(item) {
      let { url, platformId, linkState } = item;
      if (linkState == 0) {
        this.$router.push({
          path: "/loanplatformdetail",
          query: {
            id:platformId,
            status:2
          }
        });
      } else {
        window.location.href = url;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/variable/base.scss";
.discuss {
  margin-bottom: 1.8rem;
  .weui-loadmore_line {
    margin-top: 0.6rem;
  }
  &-header {
    width: 100%;
    height: 1.2rem;
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    &-inner {
      height: 0.76rem;
      width: 5.4rem; // border: 2px solid #fff;
      position: absolute;
      transform: translate(-50%, -50%);
      border-radius: 0.12rem;
      left: 50%;
      top: 50%;
      &-left {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0.12rem 0 0 0.12rem;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size: 0.42rem;
        color: #fff;
      }
      &-right {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0 0.12rem 0.12rem 0;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 0.42rem;
      }
      .active {
        background: #fff;
        color: $primaryColor;
      }
    }
  }
  &-banner {
    width: 100%;
    height: 4rem;
    margin-top: 1.2rem;
    position: relative;
    .mint-swipe-indicators {
      bottom: 0.8rem;
    }
    .mint-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-nav {
      width: 9.18rem;
      height: 2.26rem;
      background: #fff;  
      position: absolute;
      top: 3.44rem;
      left: 0.4rem;
      border-radius: 0.07rem;
      box-shadow: 0px 8px 17px #effcfc;
      ul {
        li {
          float: left;
          width: 25%;
        }
      }
      &-img {
        width: 100%;
        img {
          width: 0.62rem;
          height: 0.77rem;
          margin-top: 0.4rem;
        }
        height: 1.48rem;
      }
      p {
        font-size: 0.34rem;
      }
    }
  }
  &-discussSelected {
    margin-top: 0.4rem;
    font-size: 0.4rem;
    font-weight: bold;
    margin-bottom: 0.4rem;
  }
  &-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.4rem;
    background: #fff;
    padding-bottom: 0.4rem;
    &-item {
      box-sizing: border-box;
      padding-top: 0.4rem;
      width: 100%;
      display: flex;
      &-left {
        width: 3.6rem;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        width: 100%;
        height: 100%;
        margin-left: 0.27rem;
        text-align: left;
        border-bottom: 1px solid $borderColor;
        position: relative;
        p {
          font-size: 0.4rem;
          line-height: 0.7rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          line-height: 1rem;
          font-size: 0.25rem;
        }
        div {
          float: right;
          margin-top: 0.2rem;
          font-size: 0.4rem; // margin-top: 0.83rem;
          img {
            width: 0.4rem;
            height: auto;
            vertical-align: -8%;
          }
        }
      }
    }
  }
  &-goTop {
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    right: 0.5rem;
    animation: myfirst 1.5s infinite linear;
    i {
      font-size: 0.8rem;
      color: $primaryColor;
    }
    @-webkit-keyframes myfirst {
      0% {
        right: 0.2rem;
      }
      50% {
        right: 0.5rem;
      }
      100% {
        right: 0.2rem;
      }
    }
  }
  .zixun-content-item-right-content {
    text-align: left;
    background: white;
    padding: 0.4rem 0.4rem rem(30) 0.4rem;
    margin-bottom: .3rem;
    p {
      font-size: rem(32); // height: 0.7rem;
      line-height: 0.7rem;
      color: #333333;
      overflow: hidden;
    }
    &-author {
      margin-top: rem(10);
      p {
        line-height: .8rem;
        float: left;
      }
      p:nth-of-type(1) {
        font-size: rem(26);
        color: #666666;
        margin: 0 rem(20) 0 rem(10);
      }
      p:nth-of-type(2) {
        font-size: rem(24);
        color: #999999;
        line-height: .8rem;
      }
    }
    &-log {
      float: left;
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      margin-right: .1rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-icon {
      a {
        float: right;
        height: .5rem;
        margin-left: .1rem;
        min-width: .8rem;
        img {
          margin-top: -2px;
          width: .36rem;
          vertical-align: middle;
        }
        span {
          padding: 0 3px;
          font-size: rem(24);
          color: #999999;
        }
      }
      .red {
        color: #ff5b52;
      }
    }
  }
}
</style>

